input[type=checkbox] + label {
    display: block;
    margin: 0.5rem 0;
    cursor: pointer;
    color: rgb(99, 99, 99);
    font-size: small;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label:before {
    content: "\2714";
    border: 1px solid rgb(50, 50, 50);
    border-radius: 0.2em;
    display: inline-block;
    width: 1em;
    height: 0.9em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: baseline;
    color: transparent;
    transition: .2s;
    font-size: initial;
}

input[type=checkbox]:checked + label:before {
    background-color: rgb(50, 50, 50);
    border-color: rgb(50, 50, 50);
    color: #fff;
}

input[type=checkbox]:disabled + label:before, input[type=checkbox]:disabled + label {
    border-color: #aaa;
    cursor: not-allowed;
    opacity: .6;
}

input[type=checkbox]:checked:disabled + label:before {
    background-color: rgb(77, 77, 131);
    border-color: rgb(77, 77, 131);
}